import React from 'react'
import "../../scss/jjt/ApporintmentRecord.scss"
import { Toast,NavBar  } from 'react-vant';
// import { SettingO,Ellipsis    } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Typography } from 'react-vant';
import IconFont from "../publics/JjtIcon";
import axios from 'axios';
import { useState } from 'react';
import { useEffect } from 'react';
import { useSelector, useDispatch} from 'react-redux';
import { toitem } from '../../store/Num';
//预约记录
export default function Appointmentrecord() {
    let dispatch = useDispatch()
    let navigate = useNavigate();
    let data = ["全部","待处理","未看房","已完成","已拒绝"]
    let [btnindex,setbtnindex] = useState(0)
    let [dongdata,setDongdata] = useState([])
    let uid = localStorage.getItem("_id")
    let getdongdata = async()=>{
        let data = await axios.get("http://localhost:3000/jjt/dongAppointment",{params:{uid,btnindex}})
        console.log(data.data)
        setDongdata(data.data)
    }
    let todetail = (item)=>{
        navigate("/reservationrecord4")
        dispatch(toitem(item))
    }
    let tongyi = async(item)=>{
        item.yue_status = 1
        item.time2 = new Date()
        item.appointstatus=1
        // let obj = item.hid
        // console.log(obj)
        await axios.post("http://localhost:3000/jjt/editAppointment",item)
        console.log(item)
        getdongdata()
    }
    let jujue = async(item)=>{
        item.yue_status = 3
        item.appointstatus=2
        item.time2 = new Date()
        // let obj = item.hid
        // console.log(obj)
        await axios.post("http://localhost:3000/jjt/editAppointment",item)
        console.log(item)
        getdongdata()
    }
    useEffect(()=>{
        getdongdata()
    },[btnindex])
  return (
    <div className='appointmentrecord'>
        <div className='appointmentrecordtop'>
        <NavBar
            title="预约看房"
            
            // leftText="返回"
            // rightText={<SettingO/>}
            onClickLeft={() => {navigate("/myhomes4")}}
            onClickRight={() => Toast('按钮')}
            />
        </div>
        <div className='appointmentrecordmiddle'>
            {
                data.map((item,index)=>(
                    <button key={index} onClick={()=>{setbtnindex(index)}}>
                        <span   style={btnindex===index?{borderBottom:"3px solid orange",color:"#000000",fontWeight:"bold"}:{}}>{item}</span>
                    </button>
                ))
            }
        </div>
        {
            dongdata.map(item=>(
                <div className='appointmentrecordbottom' key={item._id}>
                    <div className='appointmentrecordbottomitem1'>
                        <div className='appointmentrecordbottomitem1left'>
                            <img src={require("../../staticfile/userimg.jpg")} alt="" />
                            <Typography.Text ellipsis className='appointmentrecordbottomcon2p1con'>{item.hid.classfy} | {item.hid.city}，{item.hid.describe}</Typography.Text>
                        </div>
                        <div className='appointmentrecordbottomitem1right'>
                            <span>{data[item.yue_status+1]}</span>
                        </div>
                    </div>
                    <div className='appointmentrecordbottomitem2'>
                        <div className='appointmentrecordbottomcon1'>
                            <img src={require("../../staticfile/userimg.jpg")} alt="" />
                        </div>
                        <div className='appointmentrecordbottomcon2'>
                            <div className='appointmentrecordbottomcon2p1'>
                                <span className='appointmentrecordbottomcon2p1con'>{item.person}</span>
                            </div>
                            <p className='appointmentrecordbottomcon2p2'>
                                <span>看房时间：{item.look_time.split("T")[0]}</span>
                            </p>
                            <p className='appointmentrecordbottomcon2p3'>
                                <span>联系手机：{item.phone}</span>
                            </p>
                        </div>
                    </div>
                    <div className='appointmentrecordbottomitem3'>
                        <button >房源详情</button>
                        <button onClick={()=>{todetail(item)}}>预约详情</button>
                        <button style={{width:"50px",border:"1px solid green",color:"green"}} onClick={()=>{tongyi(item)}}>同意</button>
                        <button style={{width:"50px",border:"1px solid red",color:"red"}} onClick={()=>jujue(item)}>拒绝</button>
                    </div>
                </div>
            ))
        }
       
    </div>
  )
}
